<template>
  <div class="PolicyStatistics">
    <div class="PolicyStatistics_Statistics">
      <div class="PolicyStatistics_Statistics_title">
        <h3>政策统计</h3>
        <span></span>
      </div>
      <div class="PolicyStatistics_Statistics_content">
        <div class="PolicyStatistics_Statistics_content_left">
          <div @click="toPolicy" class="PolicyStatistics_Statistics_content_content">
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f24d3a">{{ statisticsData.featuredPolicyTotal }}</h3>
              <span>条</span>
            </div>
            <p>精选政策</p>
          </div>
          <div @click="toProject()" class="PolicyStatistics_Statistics_content_content">
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f8a231">{{ statisticsData.qualityProjectTotal }}</h3>
              <span>个</span>
            </div>
            <p>优质项目</p>
          </div>
        </div>
        <div class="PolicyStatistics_Statistics_content_right">
          <div @click="toSubscriptionpage" class="PolicyStatistics_Statistics_content_content">
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f24d3a">{{ statisticsData.policyDepartmentTotal }}</h3>
              <span>个</span>
            </div>
            <p>政策部门</p>
          </div>
          <div @click="toProject('高新技术企业')" class="PolicyStatistics_Statistics_content_content">
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f8a231">{{ statisticsData.highTechEnterprisesTotal }}</h3>
              <span>家</span>
            </div>
            <p>高新技术企业收录</p>
          </div>
        </div>
      </div>
    </div>
    <div class="PolicyStatistics_dynamic">
      <div class="PolicyStatistics_Statistics_title">
        <h3>最新动态</h3>
        <span></span>
        <p @click="$router.push('/policyNotice')">查看更多</p>
      </div>
      <div class="PolicyStatistics_dynamic_content">
        <h4
          class="singlerows"
          v-for="(item, index) in dynamicData"
          @click="details(item.id, index)"
          :key="index"
        >{{ item.title }}</h4>
      </div>
    </div>
  </div>
</template>

<script>
import { commonRequest } from "../../api/api.js";
export default {
  name: "PolicyStatistics",
  props: ["mapCity", "mapCityType", "mapActProvince", "mapActCity"],
  data() {
    return {
      // 最新动态
      dynamicData: [],
      statisticsData: {
        featuredPolicyTotal: 0,
        highTechEnterprisesTotal: 0,
        policyDepartmentTotal: 0,
        qualityProjectTotal: 0
      } // 政策统计
    };
  },
  watch: {
    mapCity(val) {
      // console.log(1111);
      this.projectNum(this.mapCityType, val);
    }
  },
  mounted() {
    if (this.mapCityType) {
      this.projectNum(this.mapCityType, this.mapCity);
    } else {
      this.projectNum();
    }
    this.getList();
  },
  methods: {
    // 政策统计
    projectNum(type, val) {
      // console.log(89898989, type, val);
      this.statisticsData = [];
      let params = {};
      if (type == 1) {
        params.province = val;
      } else if (type == 2) {
        params.city = val;
      }
      commonRequest(
        "/api/pms/pmsPolicyNoticeInfo/queryPolicyCollect",
        params
      ).then(res => {
        this.statisticsData = { ...res };
      });
    },
    getList() {
      commonRequest("/api/pms/pmsPolicyNoticeInfo/listIndex", {
        pageNo: 1,
        pageSize: 4
      }).then(res => {
        this.dynamicData = res.records;
      });
    },
    // 跳转至详情
    details(id, index) {
      this.$router.push({
        path: `/inform/${id}`,
        query: {
          id: id,
          Pagevalue: 1,
          index: index,
          value: "",
          provinceValue: "",
          cityValue: "",
          areaValue: "",
          departmentNameValue: ""
        }
      });
    },
    // 政策通知查询页
    toPolicy() {
      let params = {};
      if (this.mapCityType === 1) {
        params.province = this.mapActProvince;
      } else if (this.mapCityType === 2) {
        params.province = this.mapActProvince;
        params.city = this.mapActCity;
      }
      this.$router.push({
        name: "policyNotice",
        params: params
      });
    },
    // 项目查询
    toProject(val) {
      let params = {};
      if (val) {
        params.value = val;
      }
      if (this.mapCityType === 1) {
        params.province = this.mapActProvince;
      } else if (this.mapCityType === 2) {
        params.province = this.mapActProvince;
        params.city = this.mapActCity;
      }
      this.$router.push({
        name: "projectQuery",
        query: params
      });
    },
    // 政策订阅
    toSubscriptionpage() {
      let params = {};
      if (this.mapCityType === 1) {
        params.province = this.mapActProvince;
      } else if (this.mapCityType === 2) {
        params.province = this.mapActProvince;
        params.city = this.mapActCity;
      }
      this.$router.push({
        name: "subscriptionpage",
        params: params
      });
    }
  }
};
</script>

<style lang="less" scoped>
.PolicyStatistics {
  padding: 30px 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  box-shadow: 1px 2px 4px #eee;
  .PolicyStatistics_Statistics_title {
    position: relative;
    h3 {
      font-size: 20px;
      font-weight: 700;
      color: #333;
      position: relative;
      z-index: 1;
    }
    span {
      width: 160px;
      height: 10px;
      background: linear-gradient(270deg, #ffffff, #cbdeff);
      position: absolute;
      bottom: 0;
      left: 0;
    }
    p {
      position: absolute;
      right: 0;
      font-size: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: rgb(68, 162, 255);
      cursor: pointer;
      z-index: 2;
    }
  }
  .PolicyStatistics_Statistics_content {
    overflow: hidden;
    .PolicyStatistics_Statistics_content_left {
      float: left;
    }
    .PolicyStatistics_Statistics_content_right {
      float: right;
    }
    .PolicyStatistics_Statistics_content_content {
      margin-top: 20px;
      cursor: pointer;
      .PolicyStatistics_Statistics_content_content_top {
        line-height: 45px;
        h3 {
          font-size: 32px;
          font-weight: 700;
          display: inline-block;
          margin-right: 10px;
        }
        span {
          font-size: 16px;
          color: #333333;
        }
      }
      p {
        font-size: 16px;
        color: #333333;
      }
    }
  }
  .PolicyStatistics_dynamic {
    margin-top: 40px;
    .PolicyStatistics_dynamic_content {
      margin-top: 30px;
      h4 {
        font-weight: normal;
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px;
        cursor: pointer;
        padding: 4px 0;
        &:hover {
          color: rgb(68, 162, 255);
        }
      }
      p {
        margin-top: 40px;
        height: 40px;
        line-height: 40px;
        background: #ffffff;
        border: 1px solid #daeaf5;
        box-sizing: border-box;
        color: #44a2ff;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>
